Indexhibit^TM
Index + Exhibit

I want to style different sections with different styles using CSS. I found a Javascript method for accomplishing this but I'd rather not use Javascript for something that could ordinarily be accomplished with very basic CSS. Any way to do this?

There are a few threads around here with some changes you could make the code that creates the Index - if you add an #id to the container ul for each section then you could easily do what you need.

For anyone else who wants to do this:

1) Open up /ndxz-studio/site/plugin/index.php in your text editor of choice;

2) Find the tag that you need to edit. There are only two in the file; one for chronological navigation, and one for section-based navigation. The line will look like this:

1. $s .= "<ul>";

3) Just below that line, you'll see another line that contains a PHP variable called $key

1. if ($out[0]['disp'] == 1) $s .= "<li class='section-title'>" . $key . "</li>n";

4) Indexhibit uses this $key variable to generate the section title in the navigation. You can use the same variable to make your [ul] tag match the section name, making it accessible to CSS. Replace the existing code from step #2 with the following:

1. $s .= "<ul id="" . str_replace(" ", "_", $key) . "">n";

5) This code replacement will insert the $key variable into your tag, while also using the PHP str_replace( ) function to replace any spaces in the section title with underscores. I needed to use this function because the section I wanted to style was was called resident artists, but CSS classes and IDs can't contain spaces. The PHP code code changes it to resident_artists (note the added underscore) so that the has a valid CSS ID. Here's what the HTML output looks like after this change:

1. <ul id="resident_artists">

6) After this, all you have to do is address the newly-labeled section in your CSS file as follows:

1. ul#resident_artists {
2.     background: #eee;
3. }

Many thanks for taking the time to write this tutorial. I'm sure many will find it useful. I'm going to play with it tomorrow.

Hi sempervirent, thanks for this. I have given this a go but am getting the following error:

"Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /home/kit34324/public_html/originals/ndxz-studio/site/plugin/index.php on line 129"

I have replaced : $s .= "

As the error says, there is a problem parsing your PHP. This probably means that you have a syntax error (i.e. a missing quotation mark, concatenator, semicolon, or some other mark of sloppy programming – no offense). Just look carefully at line 129 and I bet you'll find the mistake.

Thanks sempervierent I am definitely doing something sloppy!

I have started from scratch.

1. I actually cant not find $s .= "<ul>n";

1. but can find $s .= "<ul>n"; 
2. on lines 182 and 133, these are followed by

1. if ($out[0]['disp'] == 1) $s .= "<li class='section-title'>" . $key . "</li>n";

Any idea what I am doing wrong? Im assuming its something very basic.

Cheers!

Opps that code didn't come out how I wanted it.. apologies.
Hopefully it is clear enough.

Bump, still working on this. Any help would be great, thanks!

Sorry for the repost guys, still really struggling. Has anyone managed to do this?
I cant find the line $s .= "

mbird, you are right, the error you're seeing is due to a code formatting mistake in my original post. Sorry about that but it's kind of tedious to have to format code blocks in this way.

You're just looking for a regular <ul> tag, and you're right, it's on lines 133 and 182, depending on which menu style you're using.

If Vaska or another one of the mods could change the formatting of my original instructions, it would probably save many future headaches for Indexhibit users worldwide.

1. Change this (Step 1):
2. $s .= "<ul>n";

1. To this:
2. $s .= "<ul>";

@ sempervirent / done

Thanks again for the help sempervirent,
Im still managing to have a few problems.

I have changed line 182 from

$s .= "";

To this

$s .= "n";

But am still getting the following error:

Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /home/kit34324/public_html/originals/ndxz-studio/site/plugin/index.php on line 182

Is there anything I could be missing? Do I need to do anything to line 184?

Thanks mate.

Sorry not sure what happened there, I have changed 182, from:

1. $s .= "<ul>";

to

1. $s .= "<ul id="" . str_replace(" ", "_", $key) . "">n";

The PHP error is telling you that have an issue with a string... some of the quotation marks need to be escaped (they need a backslash before them to tell PHP that they are literal quotation marks and not the beginning or end of a string).

once again, the formatting above is incorrect, I'll see if this works:

1. $s .= "<ul id="" . str_replace(" ", "_", $key) . "">n";

Thanks you're a legend! The above seems to be the same as what I have posted?
I have no idea about PHP so am very much just shooting in the dark based on your help, no idea where a backslash would go...

Thanks!

No, the code is definitely getting reformatted for some reason. The escaped quotes are getting stripped out, and I didn't notice it before.

Have a look at the following screenshot and you'll see the line as it should appear.

http://i44.tinypic.com/2hwiwbq.gif

arsondpi, thanks for the edit, any way you can edit that post again? Line 132 in this screenshot would replace step #4 in my notes above. Maybe the removal of escaped quotes is a security thing though...

Fantastic this is perfect, thanks for helping me with this.
Works perfectly, I highly recommend people having a go at this.

No problem, sorry the code formatting mistakes wasted some of your effort. This stuff can really drive you crazy sometimes.

Is there a way to do this with the individual exhibitions - ie the il elements them selves, not just the ul?

i've managed to get things right in the index file and looking at the source code of my page shows, that each section has it's own id.
only i dont know, where exactly in my $theme/style.css i have to place the code bit from step #6, so the single sections appearance changes. placing it after all the #menu code doesnt seem to work.
if someone answers it would also be great to explain why it's going where it's going.

the right code for changing the font color would be
color: #000000
right?
thanks

$template/style.css, not $theme/style.css. sorry

one more edit:
font-size: larger
for example is changing just this one ID, but changing the color is not working.

hi, I am new to all this .php .css and so on, but I think I did it as sempervirent explained... it still doesn't work when I enter
ul#Home to the .css file

can anybody help me? I just want to change the font colour on the main page...
thanks in advance!

myWebpage

Concerning this post in this thread:

css selectors are case sensitive and preferably should be in lowercase for various reasons.

Thus this:

$s .= "<ul id="" . str_replace(" ", "_", $key) . "">\n";

should be like:

$s .= "<ul id='" . strtolower(str_replace(" ", "_", $key)) . "'>\n";

Oh, Mr. Fancypants makes a post.

;)

Vaska I'm gonna get you for this one... just wait - just wait... :-P

The last code did the trick arsondpi!

1. $s .= "<ul id='" . strtolower(str_replace(" ", "_", $key)) . "'>n";

Thank you so much, this is huge! my site looks great now.

The last code did the trick arsondpi!

$s .= "\n";

Thank you so much, this is huge! my site looks great now.

Can I please second georgm's request for help.

I think I can confirm that steps 1-5 were completed successfully by viewing the site source. But addressing the newly labeled section does not seem to have any effect on the section headings no matter where I enter it in my style.css file.

I'm trying to make each section title a different colour.

http://samuelrbarnes.net

regards,

Sam

Hi, I use the code and it works for the projects! thanks!

and now I need the same for each page _ li
i was trying but i didn't get it...

orionrush, i saw you asking about this.. did you found a way?

thanks,
pat

Can I please add my request to that of nagiko and orionrush... Would very much like to know the best way to change only the title appearance of one single exhibit title, contained within a section. I have managed to define section titles via this method and can edit these in css, but like the others I am having no luck editing the exhibit titles themselves (also tried using first-child method to no avail...)

Much appreciated.

L

Can I please add my request to that of nagiko and orionrush... Would very much like to know the best way to change only the title appearance of one single exhibit title, contained within a section. I have managed to define section titles via this method and can edit these in css, but like the others I am having no luck editing the exhibit titles themselves (also tried using first-child method to no avail...)

Much appreciated.

L

Hello, I too need help with this! Can someone give a hint how to give each exhibit their own css value??? Looked everywhere but have found no answer to this!! :)

Did you read the above information? It's all there...

I did, this works perfectly for the section titles, just not the exhibition titles! Apologies, I have tried everything within my skill level and cannot come unstuck!

ps. it could well be how I am calling this in CSS.

Menu setup:

Archive (section title
— Project1
— Project2
— Project3
— Project4

Essentially, I need 'Project1' to be coloured differently in the menu to 2,3 and 4 as this works as an overview for the following projects. I am calling this in CSS like:

ul#project1 {color: #C0C0C0;}

Nothing happens. Note: When I use 'ul#archive {color: #C0C0C0;}', this correctly colours the archive title as I have followed the steps above (unfortunately this is not what I need in this case!).

Hope this may help any solution!!

It is rather complicated code but is derived in the same file as this solution (you should have asked your question in a new thread, btw, but you clearly do see that it's the same file).

You just need to do the same thing but pinpoint where section exhibit titles are generated and user their unique 'id'. Again, similar concept to the above...not hard...

Hi again Vaska,

Unfortunately I have tried this over and over and I cannot pinpoint exactly where to do this — I've spent days on this so far but am not getting anywhere. Even if I could pinpoint where the section exhibit titles are generated I fear I cannot effectively define an ID for it — could you maybe take a look? Code below:

$s = '';      foreach($order as $key => $out) { $s .= "n";

if ($out[0]['disp'] == 1) $s .= " < li class='section-title'>" . $key . "n";

foreach($out as $page)
{ $active = ($rs['id'] == $page['id']) ? " class='active'" : '';

        
$s .= "nn"; }

return $s; }

You can probably solve something like this in your sleep while I could take months of getting it wrong! :P

Thanks!!

Formatting went funny — heres a screenshot instead

Okay I have now managed to give each li an ID, but when I call this in css nothing happens, could you let me know where I am going wrong?

li id = 'background'

style:
li#background {color: #C0C0C0;}

should I be calling this in another way?!

where are you trying all this?

site>plugin>index.php

and for css sample>style.css.

I've now managed to style exhibit titles by adding 'a' after the id and defining the ul containing it.. so:

#about #background a {color: #C0C0C0;} //

^ this works, where 'about' is section-title and 'background' is the name of an exhibit, however it will not change titles contained in a expanding menu ul(ross cairns)... argh another obstical! haha.

Any thoughts?

did I miss your url? did you read the forum rules?

hi!
thanks for this information, it helped me a lot.
but now, i have a problem.
i was able to assign section id's in my style.css, and it works; now i can assign different padding, font, size, etc to each section, seperately.

however, what i can't do is to give every section's links a different link color, hover color, etc.

will i add another
a:link { text-decoration: none; color: #; }
a:active { text-decoration: none; color: #; }
a:visited { text-decoration: none; color: #; }
a:hover { text-decoration: none; color: #; }
somewhere, to work the individual section? if so, where exactly, and should i remove the old one?

i'm talking about this: Webpage

thanks in advance!

works for me in chrome... don´t know if every browser can handle uppercase letters in the css selector.

Try it like this:

ul#Portfolio li a:hover{ color: red }
ul#Projects li a:hover{ color: yellow }

perfect!
thanks a lot for this